﻿@{
    ViewData["Title"] = "RoomType";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>房型管理</h1>


@* 房型查询 *@
<div class="layui-form-item">
    <label class="layui-form-label">房型名称</label>
    <div class="layui-input-inline">
        <input type="text" id="txtName" placeholder="请输入房型名称" autocomplete="off" class="layui-input">

    </div>
    <div>
        <button class="layui-btn" lay-submit lay-filter="demoTable" lay-event="myBtn">查询</button>
        <button class="layui-btn" id="add">新增房型</button>
    </div>

</div>
<script type="text/html" id="toolbarDemo">
     <div>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
    </div>
</script>

@* 显示房型 *@
<table class="layui-table" id="demoTable" lay-filter="demoTable">
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
<div id="demo-laypage-all"></div>
@* 房型操作列 *@
<script type="text/html" id="bardemo">
    <a class="layui-btn layui-btn-xs layui-btn-action"   lay-event="yourFunction">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-action"  lay-event="AddRoomNumber">设置房号</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-action" lay-event="deleteFunction">删除</a>
</script>
<div id="demo-laypage-layout-1"></div>
@* 房型弹出层 *@
<div id="roomTypeAdd" style="display:none">
    <form class="layui-form">
        <div class="layui-form-item" style="display:none">

            <label class="layui-form-label"><span style="color:red">*</span>房间id</label>
            <div class="layui-input-block">
                <input type="text" name="roomId" id="roomId" placeholder="房间id">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">  <span style="color:red">*</span>房间名称</label>
            <div class="layui-input-block">
                <input type="text" name="roomName" id="roomName" lay-verify="required" placeholder="房间名称">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门市价</label>
            <div class="layui-input-block">
                <input type="text" name="price" id="price" lay-verify="required" placeholder="￥0.00">元
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房型面积</label>
            <div class="layui-input-block">
                <input type="text" name="roomAcreage" id="roomAcreage" lay-verify="required" placeholder="m2">平方
            </div>
        </div>

        <div class="layui-form-item">

            <label class="layui-form-label"><span style="color:red">*</span>可住人数</label>
            <div class="layui-input-block">
                <input type="text" name="lodgingToll" id="lodgingToll" lay-verify="required" placeholder="0">人
            </div>
        </div>

        <div class="layui-form">
            <label class="layui-form-label">可否加床</label>
            <div class="layui-input-block">
                <input type="radio" name="addBed" id="addBed" value=1 title="不可加床" checked>
                <input type="radio" name="addBed" id="addBed" value=2 title="免费加床">
                <input type="radio" name="addBed" id="addBed" value=3 title="收费加床">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">同住人预留信息</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" name="reserveInfo" id="reserveInfo" checked="checked" lay-text="开启|关闭" />
                启用后，用户提交客房订货可填写填写同住人
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <!-- 上传按钮 -->
                    <button type="button" class="layui-btn" id="uploadBtn">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <!-- 隐藏的 input，用于存储图片路径 -->
                    <input id="roomImage" name="roomImage" />
                    <!-- 预览区域 -->
                    <div id="imgPreviewDiv" class="layui-upload-list" style="display:none;">
                        <img style="display:none" class="layui-upload-img" width="100px" height="80px" id="Image" />
                        <p id="previewText"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-form-item">


                <label class="layui-form-label">视频</label>
                <div class="layui-input-block">
                    <!-- 上传按钮 -->
                    <button type="button" class="layui-btn demo-class-accept" id="uploadBtns">
                        <i class="layui-icon ">&#xe67c;</i>上传视频
                    </button>
                    <!-- 隐藏的 input，用于存储视频路径 -->
                    <input id="roomVideo" name="roomVideo" />
                    <!-- 预览区域（可根据需要添加视频预览） -->
                    <div id="videoPreviewDiv" style="display:none;">
                        <!-- 可使用 HTML5 的 <video> 标签进行视频预览，但实际中可能不常用 -->
                        <video width="320" height="240" controls id="previewVideo"></video>
                        <p id="previewText"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房型介绍</label>
            <div class="layui-input-block">
                <textarea name="roomDesc" id="roomDesc" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">房型标签</label>
            <div class="layui-input-block">
                <input type="text" name="roomtag" id="roomtag" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item" layui-form-text>
            <label class="layui-form-label">配套服务</label>
            <div class="layui-btn-container">
                <button type="button" class="layui-btn" lay-btn-primary id="addServices">新增配套服务</button>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button class="layui-btn" type="button" lay-submit lay-filter="submitForm">确认</button>
                <button class="layui-btn" lay-submit lay-filter="xiuForm">修改</button>
            </div>
        </div>
    </form>

</div>
@* 房号弹出层（显示） *@
<div id="RoomNumber" style="display:none">
    <button class="layui-btn" id="AddNUmberroom">添加房号</button>
    <table class="layui-table" id="Number" lay-filter="Number">
        <tbody>
            <!-- 这里是动态生成的数据 -->
        </tbody>
    </table>
</div>
@* 房号弹出层 *@
<div id="updateNumberForm" style="display:none">
    <form class="layui-form">

        <div class="layui-form-item" >
            <label class="layui-form-label">房号</label>
            <div class="layui-input-block">
                <input type="text" name="roomNumber" id="roomNumber" placeholder="房号">
            </div>
        </div>

        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">房型ID</label>
            <div class="layui-input-block">
                <input type="text" name="roomId" id="roomId" placeholder="房型">
            </div>
        </div>

        <div class="layui-form-item" style="display:none">

            <label class="layui-form-label">房号ID</label>
            <div class="layui-input-block">
                <input type="text" name="numberId" id="numberId" placeholder="房号">
            </div>
        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="orderByNumber" id="orderByNumber" placeholder="排序">
            </div>
        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" id="remark" placeholder="备注">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button class="layui-btn" type="button" lay-submit lay-filter="AddnreNumber">添加</button>
                <button class="layui-btn" type="button" lay-submit lay-filter="xiunumber">修改</button>
            </div>
        </div>
    </form>
</div>
@* 房型配套服务弹出层 *@
<div id="roomTypeServices" style="display:none">
    <div id="context">
    </div>
    <div style="margin-top:10px">
        <button style="margin-left:500px;" type="button" id="cancel" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>
        <button id="confirm" type="button" class="layui-btn layui-btn-sm layui-btn-normal">确定</button>
    </div>
</div>

@* 房号操作列 *@
<script type="text/html" id="numberdemo">
    <a class="layui-btn layui-btn-xs layui-btn-action"   lay-event="yourNumber">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-action" lay-event="deleteNumber">删除</a>
</script>
<script>

    layui.use(['table', 'upload', 'jquery', 'layer', 'form', 'laypage', 'element'], function () {

        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;
        //上传图片
        var imgurl = '';
        var uploadInst = upload.render({
            elem: '#uploadBtn', // 绑定上传按钮的 ID
            url: 'http://localhost:5174/api/RoomType/Upload', // 替换为实际的图片上传后台接口 URL
            before: function (obj) {
                // 预读本地文件示例
                obj.preview(function (index, files, result) {
                    imgurl = 'http://localhost:5174/' + result;
                    $('#Image').attr('src', imgurl); // 图片链接（base64）
                  
                });
            },
            done: function (res) {
                // 如果上传成功，更新隐藏 input 的值并显示预览区域
                if (res) {
                    layer.alert("上传成功");
                    document.getElementById("roomImage").value = res;
                    $("#imgPreviewDiv").css("display", "");
                } else {
                    return layer.msg('上传失败');
                }
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#previewText');
                demoText.html('<span style="color:#ff5722;">上传失败</span><a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        //上传视频
        var uploadInst = upload.render({
            elem: '#uploadBtns',
            url: 'http://localhost:5174/api/RoomType/UploadVedio', // 替换为实际的 API 地址和端口
            accept: 'file', // 普通文件
            before: function (obj) {
                // 可以在此添加上传前的处理逻辑
            },
            done: function (res) {
                if (res != null) {
                    layer.alert("上传成功");
                    console.log(res);
                    document.getElementById("roomVideo").value = res;
                } else {
                    layer.msg('上传失败');
                }
            },
            error: function () {
                layer.msg('上传出错');
            }
        });
        //定义变量
        var from = {
            roomName: $("#txtName").val(),
            pageIndex: 1,
            pageSize: 10
        }
        //获取房型Id
        //调用弹出层添加房号方法
        var myButton = document.getElementById('AddNUmberroom');
        //添加房号

        myButton.addEventListener('click', function () {
            layer.open({
                title: '添加房号 - id:' + roomid,
                type: 1,
                shade: false, // 不显示遮罩
                area: ['80%', '80%'],
                content: $('#updateNumberForm'),
                success: function (layero, index) {
                    $('#updateNumberForm input[type="text"][name="roomId"]').val(roomid);  // 假设文本框的名称为 roomTypeId
                },
                end: function () {
                    // layer.msg('关闭后的回调', {icon:6});
                }

            });

        });



        //添加房型
        form.on('submit(submitForm)', function (data) {
            data.elem.disabled = true;//防止重复提交
            if (data.field.reserveInfo == true) {
                data.field.reserveInfo = 1;
            }
            else {
                data.field.reserveInfo = 0;
            }
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/AddRoomType',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("添加成功");
                        
                    }
                }
            });
            return false;
        });


        var roomid = 0;
        //反填房型编辑 （单删）添加房号
        table.on('tool()', function (obj) {
            var data = obj.data; // 获取当前行数demoTable据
            var layEvent = obj.event; // 获取 lay-event 对应的值
            var maArrayid = [];
            maArrayid.push(data.roomId)
            console.log(data)
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/GetroombyId',  // 替换成实际的接口地址
                type: 'GET',
                data: { id: data.roomId },  // 传递的参数
                success: function (data) {
                    // 将数据填充到表单中
                    document.getElementById('roomId').value = data.data.roomId;
                    document.getElementById('roomName').value = data.data.roomName;
                    document.getElementById('price').value = data.data.price;
                    document.getElementById('roomAcreage').value = data.data.roomAcreage;
                    document.getElementById('lodgingToll').value = data.data.lodgingToll;
                    document.getElementById('reserveInfo').value = 1;
                    document.getElementById('addBed').value = data.data.addBed; 
                    document.getElementById('roomImage').value = data.data.roomImage;
                    document.getElementById('roomVideo').value = data.data.roomVideo;
                    document.getElementById('roomDesc').value = data.data.roomDesc;
                    document.getElementById('roomtag').value = data.data.roomTag;

                },
                error: function (xhr, status, error) {
                    console.error('Error fetching user data:', error);
                    // 处理错误情况
                }
            });

            if (obj.event === 'yourFunction') {
                //编辑按钮的处理逻辑
                //var roomid = obj.roomId
                layer.open({
                    title: '编辑 - id:' + data.roomId,
                    type: 1,
                    shade: false, // 不显示遮罩
                    area: ['80%', '80%'],
                    content: $('#roomTypeAdd'),
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
                //在这里进行编辑相关的操作，例如打开编辑模态框、发送编辑请求等
                console.log('编辑按钮被点击，行数据为:', data);
            }
            //设置房号
            else if (layEvent === 'AddRoomNumber') {
                console.log('编辑按钮被点击，行数据为:', data);
                sessionStorage.setItem("roomId", data.roomId)
                $.ajax({
                    url: 'http://localhost:5174/api/RoomType/ByroomIdGetRoomNumber',
                    type: 'get',
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    // contentType: "application/json",
                    data: { id: data.roomId },
                    async: true,
                    success: function (res) {
                        table.render({
                            elem: '#Number',
                            data: res.data,
                            cols: [[

                                { field: 'roomNumber', title: '房号' },
                                { field: 'orderByNumber', title: '排序' },
                                { field: 'remark', title: '备注' },
                                { toolbar: '#numberdemo', title: '操作' }
                            ]],
                            page: false
                        });

                        console.log(res.data.tatol);
                    },
                    error: function (error) {
                        console.error(error);

                    }
                })
                roomid = data.roomId
                //document.getElementById('roomId').value = roomid;
                layer.open({

                    title: '设置房号 - id:' + data.roomId,
                    type: 1,
                    shade: false, // 不显示遮罩
                    area: ['50%', '50%'],
                    content: $('#RoomNumber'),
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            }
            else if (layEvent === 'deleteFunction') {
                $.ajax({
                    url: 'http://localhost:5174/api/RoomType/DeleteRoomType',
                    type: 'post',
                    contentType: "application/json",
                    data: JSON.stringify({ ids: maArrayid }),
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    success: function (res) {
                        if (res.code > 0) {
                            layer.msg("删除成功");
                            show()
                        }

                        // 删除成功后的操作
                    }
                });
            }
        });

        //反填房号 删除房号
        table.on('tool(Number)', function (obj) {
            var data = obj.data; // 获取当前行数据
            var layEvent = obj.event; // 获取 lay-event 对应的值
            if (obj.event === 'yourNumber') {
                console.log('修改按钮被点击，行数据为:', data);
                //编辑按钮的处理逻辑
                //var roomid = obj.roomId
                // 将数据填充到表单中
                document.getElementById('roomId').value = data.roomId;
                document.getElementById('numberId').value = data.numberId;
                document.getElementById('roomNumber').value = data.roomNumber;
                document.getElementById('orderByNumber').value = data.orderByNumber;
                document.getElementById('remark').value = data.remark;

                layer.open({
                    title: '编辑房号 - id:' + roomid,
                    type: 1,
                    shade: false, // 不显示遮罩
                    area: ['50%', '50%'],
                    content: $('#updateNumberForm'),
                    success: function (layero, index) {
                        $('#updateNumberForm input[type="text"][name="roomId"]').val(roomid);  // 假设文本框的名称为 roomTypeId
                    },
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }

                });
                //在这里进行编辑相关的操作，例如打开编辑模态框、发送编辑请求等

            } else if (layEvent === 'deleteNumber') {

                layer.confirm('确定要删除该行数据吗？', function (index) {
                    // 执行删除操作...
                    var myArray = [];
                    myArray.push(obj.data.numberId)
                    $.ajax({
                        url: 'http://localhost:5174/api/RoomType/DeleteRoomNumber',
                        type: 'post',
                        contentType: "application/json",
                        data: JSON.stringify({ ids: myArray }),
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem('token')
                        },
                        success: function (res) {
                            if (res.code > 0) {
                                layer.msg("删除成功");
                                show()
                            }

                            // 删除成功后的操作
                        }
                    });
                    layer.close(index);
                });
            }
        });

        //修改房型
        form.on('submit(xiuForm)', function (data) {
            console.log("修改的参数" + data.field.reserveInfo)
            if (data.field.reserveInfo = false == false) {
                data.field.reserveInfo = 0;
            }
            else {
                data.field.reserveInfo = 1;
            }

            $.ajax({
                url: 'http://localhost:5174/api/RoomType/UpdaterRoom',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("修改成功");
                        show();
                    }
                }
            });
            return false;
        });

        //修改房号
        form.on('submit(xiunumber)', function (data) {
            console.log("修改" + data.field.roomId);
            data.elem.disabled = true;//防止重复提交
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/UpdateROomNUmber',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("修改成功");
                        show();
                    }
                }
            });
            return false;
        });
        //添加房号
        //document.getElementById('roomId').value = roomid;

        form.on('submit(AddnreNumber)', function (data) {
            data.elem.disabled = true;//防止重复提交
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/AddRoomNumber',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("添加成功");
                        show();
                    }
                    else{
                        layer.msg("添加失败 房号不能重复");
                    }
                }
            });
            return false;
        });
        //显示
        function show() {
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/GetRoom',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(from),
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (res) {
                    tatolcount = res.data.tatol
                    table.render({
                        elem: '#demoTable',
                        toolbar: '#toolbarDemo',
                        data: res.data.data,
                        cols: [[
                            { type: 'checkbox' },
                            { field: 'roomName', title: '房型名称' },
                            { field: 'price', title: '门市价（元）' },
                            { field: 'lodgingToll', title: '房间数量' },
                            { field: 'roomsSort', title: '排序' },
                            { toolbar: '#bardemo', title: '操作' }
                        ]],
                        page: true
                    });

                    console.log(res.data.tatol);
                },
                error: function (error) {
                    console.error(error);

                }
            })
        }
        //立即调用
        show();

        //显示
        $(document).on('click', '[lay-event="myBtn"]', function () {
            var data = {
                roomName: $("#txtName").val(),
            }
            // 处理点击事件的逻辑
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/GetRoom',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data),
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (res) {
                    tatolcount = res.data.tatol
                    table.render({
                        elem: '#demoTable',
                        toolbar: '#toolbarDemo',
                        data: res.data.data,
                        cols: [[
                            { type: 'checkbox' },
                            { field: 'roomName', title: '房型名称' },
                            { field: 'price', title: '门市价（元）' },
                            { field: 'lodgingToll', title: '房间数量' },
                            { field: 'roomDesc', title: '排序' },
                            { toolbar: '#bardemo', title: '操作' }

                        ]],
                        page: true
                    });

                    console.log(res.data.tatol);
                },
                error: function (error) {
                    console.error(error);

                }
            })
        });

        // var myButtondel = document.getElementById('deleteinfo');
        // myButtondel.addEventListener('click', function () {
        //     console.log('提交按钮被点击了！');

        // });

        // 反选
        // 监听全选复选框
        let checkStatus = layui.table.checkStatus('demoTable');

        let selectedIds = [];
        for (let i = 0; i < checkStatus.data.length; i++) {
            selectedIds.push(checkStatus.data[i].roomId);
        }
        var roomids = selectedIds

        //弹出层 批量删除
        $(".layui-btn").click(function () {
            var id = $(this).attr('id');
            if (id === "add") {
                layer.open({

                    type: 1,
                    area: ['630px', '360px'],
                    shade: false, // 不显示遮罩
                    content: $('#roomTypeAdd'), // 捕获的元素
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            }
        });
        function getRoomService() {
            $.ajax({
                url: "http://localhost:5174/api/RoomType/GetRoomeServices",
                type: "get",
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                success: res => {
                    console.log(res.data)
                    var content = '';
                    $.each(res.data, function (index, item) {
                        content += '<div class="layui-card" > '
                        content += '<div class="layui-card-header" >';
                        content += ' <span class="serviceName" > ' + item.typeName + ' </span>';
                        content += '</div > '
                        content += '<div class="layui-card-body" style="heigth:60px;">';
                        $.each(item.typeJoinValues, function (index1, item1) {

                            content += '<label for="valueName " id="label">' + item1.valueName + ' <input type = "checkbox" name = "valueName" id = "valueName" title = "' + item1.valueName + '" value = "' + item1.valueName + '" lay - skin="tag" ></label> '

                        })

                        content += '</div></div>'

                    })

                    $("#context").html(content);
                }
            })

        }
        //接收配套服务弹出层的index
        var index;
        //配套服务弹出层
        $(".layui-btn").click(function () {
            getRoomService();

            var id = $(this).attr('id');
            if (id === "addServices") {
                index = layer.open({
                    type: 1,
                    area: ['700px', '700px'],
                    shade: false, // 不显示遮罩
                    content: $('#roomTypeServices'), // 捕获的元素
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            }

        });

        //关闭弹窗
        $('#cancel').on('click', function () {

            layer.close(index); // 关闭弹窗
            // 在这里可以添加其他关闭后的操作
        });
        //关闭弹窗
        $('#confirm').on('click', function () {

            layer.close(index); // 关闭弹窗
            // 在这里可以添加其他关闭后的操作
        });
        //批量删除
        table.on('toolbar(demoTable)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    checkids = [];
                    checkStatus.data.forEach(function (row) {
                        checkids.push(row.roomId);
                    })
                    //layer.alert(layui.util.escape(JSON.stringify(checkids)));
                    console.log("批量删除被点击")
                    $.ajax({
                        url: 'http://localhost:5174/api/RoomType/DeleteRoomType',
                        type: 'post',
                        contentType: "application/json",
                        data: JSON.stringify({ ids: checkids }),
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem('token')
                        },
                        success: function (res) {
                            if (res.code > 0) {
                                layer.msg("删除成功");
                                show()
                            }

                            // 删除成功后的操作
                        }
                    });

                    break;
                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
            };
        });

        //表单校验
        form.verify({
            roomName: [/^.{20,}$/, '用户名至少 20 个字符'],
            lodgingToll: [/^\S+$/, '人数必填项不能为空'],
            //roomImage: [/^\S+$/, '必填项不能为空']
        });

    });
</script>
<style>
    .serviceName {
        font-size: 20px;
        color: #45c8bb; /* 假设的碧青色十六进制颜色代码 */
    }

    #label:hover {
        width: 60px;
        height: 60px;
        border: inset;
        background-color: #d4edda; /* 浅绿色背景，表示选中 */
    }

</style>